<template>
  <view class="body">
    <view class="has_add"
      >已添加<text class="green">{{ familyList.length }}</text
      >人</view
    >
    <view class="lists">
      <!-- <uni-swipe-action>
        <uni-swipe-action-item
          v-for="(item, index) in familyList"
          :key="index"
          :right-options="options"
          @click="handleClick(item)"
          style="margin-bottom: 24rpx"
        >
        </uni-swipe-action-item>
      </uni-swipe-action> -->
      <!-- <com-swipe-cell :right-width="104" > -->
        <view
          v-for="(item, index) in familyList" 
          :key="index"
          class="item" 
          @tap.stop="update(item)"
        >
          <view class="top">
            <text class="name">{{ item.patientName }}</text>
            <text class="age">{{ item.gender == 1 ? '男' : (item.gender == 2 ? '女' : '未知') }}</text>
            <text class="age">
              {{ item.ageYear > 0 ? item.ageYear + '岁' : '' }}{{ item.ageMonth == 0 && item.ageYear == 0 ? '未满月' 
              : item.ageYear < 18 && item.ageMonth != 0 ? item.ageMonth + '月' : '' }}
            </text>
            <text v-if="item.relationship && relationList.length > 0" class="relation">
              {{ relationList.filter((val) => val.value == item.relationship)[0]?.label }}
            </text>
            <text v-if="item.defaultPatient == 1" class="default">默认</text>
          </view>
          <view class="idcard">证件号: {{ item.certNo }}</view>
          <view class="morebtn">
            <image src="https://ainengli.meilianshuke.com/jkhx/raozg/more.png" class="img_more" />
          </view>
        </view>
        <!-- <template #right>
          <view class="gy-swipe-cell-btns">
              <view @click.stop="handleClick(item)">删除</view>
          </view>
        </template> -->
      <!-- </com-swipe-cell> -->
    </view>
    <view class="fixed">
      <button class="confirm_btn" @click="add">添加就诊人</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from 'vue'
import { getPatientList, patientDelete, patientGet, dictData } from './patient.api'
// import { base_info } from '@/api/moreMessage'
import { onShow, onLoad } from '@dcloudio/uni-app'

const { proxy }: any = getCurrentInstance();

const type = ref('patient')
const Empi = ref('')
const familyList = ref([])
const options = reactive([
  {
    text: '删除',
    style: {
      backgroundColor: '#ff503d'
    }
  }
])
// const swipeRef = ref()
const userInfo = ref({})
const relationList = ref([])

onLoad((option) => {
  type.value = option.type ? option.type : 'patient'
})

onShow(async () => {
  userInfo.value = uni.getStorageSync('system-userinfo')
  await getDictData()
  init()
})

const init = () => {
  getPatientList().then((res) => {
    familyList.value = res.records
  })
}

const getDictData = () => {
  dictData({type: 'relationship'}).then((res) => {
    relationList.value = res
    console.log('关系列表', relationList.value)
  })
}

const select = (item: any) => {
  // 切换默认就诊人
  let params = {
    id: item.id,
  }
  patientGet(params).then((res) => {
    const info = res
    proxy.store.setPatientInfo(info)
    proxy.utils.uni.route.back({ delta: 0 })
  })
}

const update = (item: any) => {
  proxy.utils.uni.route.go('/pages/patients/addOrDelete?type=update&userId=' + item.id)
}

const add = () => {
  proxy.utils.uni.route.go('/pages/patients/addOrDelete?type=add')
}

const handleClick = (item: any) => {
  if (item.isDefault) {
    uni.showToast({
      title: '不能删除默认就诊人！',
      icon: 'none'
    })
    return
  }
  if (item.hasVip) {
    uni.showToast({
      title: '该就诊人有会员记录，无法删除',
      icon: 'none'
    })
    return
  }
  Empi.value = item.id
  uni.showModal({
    title: '提示',
    content: '确认要删除该就诊人吗?',
    success: function (res) {
      if (res.confirm) {
        deletePatient()
      }
    }
  })
}
const deletePatient = () => {
  uni.showLoading()
  patientDelete({ id: Empi.value })
    .then((res) => {
      uni.hideLoading()
      init()
      if (proxy.store.patient.current.id == Empi.value) {
        // 如果删除的是当前就诊人则将当前就诊人改为默认就诊人
        let defaultEmpi = familyList.value.find((item: any) => {
          return item.isDefault
        })
        patientGet({ id: defaultEmpi.id }).then((res) => {
          const info = res
          proxy.store.setPatientInfo(info)
        })
      }
      uni.showToast({
        title: '删除成功',
        icon: 'none',
        duration: 2000
      })
      // swipeRef.value.closeAll()
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<style lang="scss" scoped>
.body {
  padding: 32rpx 32rpx 168rpx;
  background: #f3f7f8;
  .has_add {
    margin-bottom: 24rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #222222;
    .green {
      color: #00d1b6;
    }
  }
  .lists {
    height: calc(100vh - 258rpx);
    overflow: auto;
    // ::v-deep .u-swipe-action-item__right__button__wrapper {
    //   border-radius: 0 12rpx 12rpx 0 !important;
    //   font-weight: 400;
    //   font-size: 24rpx;
    //   color: #ffffff;
    // }
    // ::v-deep .uni-swipe {
    //   margin-top: 24rpx;
    // }
    .item {
      background: #ffffff;
      border-radius: 12rpx;
      padding: 30rpx 24rpx;
      margin-bottom: 24rpx;
      position: relative;
      .top {
        display: flex;
        margin-bottom: 16rpx;
        justify-content: flex-start;
        align-items: center;
        gap: 24rpx;
        .name {
          font-weight: 700;
          font-size: 32rpx;
          color: #222222;
        }
        .age {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
        .relation {
          height: 40rpx;
          line-height: 40rpx;
          background: #fafafa;
          border-radius: 4rpx;
          border: 1px solid #e5e6eb;
          box-sizing: border-box;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          padding: 0 16rpx;
        }
        .default {
          height: 40rpx;
          line-height: 40rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
          background: #00d1b6;
          border-radius: 4rpx;
          padding: 2rpx 16rpx 0;
        }
      }
      .idcard {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }
      .morebtn {
        width: 100rpx;
        height: 160rpx;
        line-height: 160rpx;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        .img_more {
          transform: translateY(6rpx);
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .gy-swipe-cell-btns{
      width: 104rpx;
      height: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
      background-color: #ff503d;
      border-radius: 0 12rpx 12rpx 0 !important;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }
  }
  .fixed {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: #ffffff;
    .confirm_btn {
      width: 100%;
      background: #00d1b6;
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      &::after {
        border: none;
      }
    }
  }
}
</style>
